import React, { useEffect, useRef, useState } from 'react';
import styles from '../styles/view.scss';
import { Common } from 'UtilsCommon';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    LineChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DataZoomComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';
import Base from './base';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, LineChart, CanvasRenderer]
);

const getYValue = (p) => {
    if (p.seriesName === '平均访问时长') return Common.getMillSecondsTime(p.data);
    return p.data;
};

const getDataSourceAsc = (dataList) => {
    const list = [];
    for (let i = dataList.length - 1; i >= 0; i--) {
        list.push(dataList[i]);
    }
    return list;
};

const setVisitTimeEcharts = (ele, dataList) => {
    dataList = getDataSourceAsc(dataList);

    const chart = echarts.init(ele);

    const option = {
        legend: {
            data: ['30秒以下浏览量', '30-60秒浏览量', '1-5分种浏览量', '5-10分钟浏览量', '10分钟以上浏览量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            data: dataList.map(m => m.TimePoint)
        },
        yAxis: {
            name: '数量',
            type: 'value',
            splitArea: {
                show: true
            }
        },
        dataZoom: [{
            type: 'slider',
            show: true,
            realtime: true,
            start: 0,
            end: 100,
        }],
        series: [
            {
                name: '30秒以下浏览量',
                type: "line",
                data: dataList.map(m => m.SecondTypeCount1)
            },
            {
                name: '30-60秒浏览量',
                type: "line",
                data: dataList.map(m => m.SecondTypeCount2)
            },
            {
                name: '1-5分种浏览量',
                type: "line",
                data: dataList.map(m => m.SecondTypeCount3)
            },
            {
                name: '5-10分钟浏览量',
                type: "line",
                data: dataList.map(m => m.SecondTypeCount4)
            },
            {
                name: '10分钟以上浏览量',
                type: "line",
                data: dataList.map(m => m.SecondTypeCount5)
            }
        ],
    };

    chart.setOption(option);
};

const setWxShareEcharts = (ele, dataList) => {
    dataList = getDataSourceAsc(dataList);

    const chart = echarts.init(ele);

    const option = {
        legend: {
            data: ['分享次数', '分享用户数', '邀请者人数', '邀请好友数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            data: dataList.map(m => m.TimePoint)
        },
        yAxis: {
            name: '数量',
            type: 'value',
            splitArea: {
                show: true
            }
        },
        dataZoom: [{
            type: 'slider',
            show: true,
            realtime: true,
            start: 0,
            end: 100,
        }],
        series: [
            {
                name: "分享次数",
                type: "line",
                data: dataList.map(m => m.ShareCount)
            },
            {
                name: '分享用户数',
                type: "line",
                data: dataList.map(m => m.ShareUserCount)
            },
            {
                name: "邀请者人数",
                type: "line",
                data: dataList.map(m => m.InviteUserCount)
            },
            {
                name: "邀请好友数",
                type: "line",
                data: dataList.map(m => m.FriendUserCount)
            }
        ],
    };

    chart.setOption(option);
};

const setEventActionEcharts = (ele, dataList) => {
    dataList = getDataSourceAsc(dataList);

    const chart = echarts.init(ele);

    const option = {
        legend: {
            data: ['点击量', '访客量(UV)']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            data: dataList.map(m => m.TimePoint)
        },
        yAxis: {
            name: '数量',
            type: 'value',
            splitArea: {
                show: true
            }
        },
        dataZoom: [{
            type: 'slider',
            show: true,
            realtime: true,
            start: 0,
            end: 100,
        }],
        series: [
            {
                name: "点击量",
                type: "line",
                data: dataList.map(m => m.VisitCount)
            },
            {
                name: "访客量(UV)",
                type: "line",
                data: dataList.map(m => m.UserVisitCount)
            }
        ],
    };

    chart.setOption(option);
};

const setEcharts = (ele, dataList) => {
    dataList = getDataSourceAsc(dataList);

    const chart = echarts.init(ele);

    const option = {
        legend: {
            data: ['浏览量(PV)', '访客量(UV)', '平均访问时长']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            formatter: (params) => {
                const html = ['<div style=\"margin: 0px 0 0;line-height:1;\">'];
                html.push('<div style=\"margin: 0px 0 0;line-height:1;\">');

                params.forEach((p, i) => {
                    if (i === 0) {
                        html.push(`<div style=\"font-size:14px;color:#666;font-weight:400;line-height:1;\">${p.axisValueLabel}</div>`);
                    }
                    html.push('<div style=\"margin: 10px 0 0;line-height:1;\">');
                    html.push('<div style=\"margin: 0px 0 0;line-height:1;\"><div style=\"margin: 0px 0 0;line-height:1;\">');
                    html.push(p.marker);
                    html.push(`<span style=\"font-size:14px;color:#666;font-weight:400;margin-left:2px\">${p.seriesName}</span>`);
                    const value = getYValue(p);
                    html.push(`<span style=\"float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900\">${value}</span>`);
                    html.push('<div style=\"clear:both\"></div></div><div style=\"clear:both\"></div></div></div>');
                });
                html.push('<div style=\"clear:both\"></div></div><div style=\"clear:both\"></div></div>');
                return html.join('');
            }
        },
        xAxis: {
            data: dataList.map(m => m.TimePoint)
        },
        yAxis: [{
            name: '数量',
            type: 'value',
            splitArea: {
                show: true
            }
        }, {
            name: '平均访问时长',
            type: 'value',
            axisLabel: {
                formatter: (v) => Common.getMillSecondsTime(v)
            },
        }],
        dataZoom: [{
            type: 'slider',
            show: true,
            realtime: true,
            start: 0,
            end: 100,
        }],
        series: [
            {
                name: "浏览量(PV)",
                type: "line",
                data: dataList.map(m => m.VisitCount)
            },
            {
                name: "访客量(UV)",
                type: "line",
                data: dataList.map(m => m.UserVisitCount)
            },
            {
                name: "平均访问时长",
                type: "line",
                yAxisIndex: 1,
                data: dataList.map(m => m.AvgMillSeconds)
            },
        ],
    };

    chart.setOption(option);
};

export default React.memo((props) => {
    const { property } = Base.getProps(props);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [dataList, setDataList] = useState(property.dataList || []);

    const div = useRef(null);

    useEffect(() => {
        if (div.current) {
            if (property.isEventAction) setEventActionEcharts(div.current, dataList);
            if (property.isWxShare) setWxShareEcharts(div.current, dataList);
            if (property.isVisitTime) setVisitTimeEcharts(div.current, dataList);
            else setEcharts(div.current, dataList);
        }
    }, [div, dataList, property]);

    property.setVisible = (v) => setIsVisible(v);
    property.setDataList = (d) => setDataList(d);

    if (!isVisible) return null;

    const className = Base.getClassName(property, styles);

    return <div className={className} style={property.style} ref={div}>
    </div>;
});